You can use the :nth-child() pseudo-class in CSS to style elements based on their order within a parent. To target every third list item, you can use the pattern 3n inside :nth-child().

Key Points About :nth-child()

1
:nth-child() selects elements based on their position within a parent element.
2
You can use formulas like 2n, 3n, or 3n+1 to create repeating patterns.
3
li:nth-child(3n) targets every third list item in a list.

Example: Styling Every Third List Item

In this example, the :nth-child(3n) selector highlights every third list item with a blue background and bold text. You can adjust the number to style elements in other repeating sequences.

Best Practices

1
Use :nth-child() for pattern-based styling instead of adding extra classes.
2
Remember that counting starts at 1, not 0.
3
Use :nth-of-type() when you only want to target specific element types among mixed children.
4
Combine with transitions for smooth visual effects.

Difficulty: 3/10

Topics: nth-child selector, CSS specificity, list item styling

Scenario Questions

0-2 years experience

1
How would you style every third list item in an unordered list to have a different background color?
2
What happens if you use :nth-child(3) instead of :nth-child(3n)? Why doesn't that work for every third item?

2-5 years experience

1
Our product page shows a list of featured items, but after adding a promotional banner between items, every third item stopped getting the highlight style — what’s likely broken and how would you fix it?
2
A designer wants every third list item to have a border, but the list is rendered conditionally — sometimes it’s empty or has only 2 items. How do you ensure the styling is robust and doesn’t cause layout shifts?

5-8 years experience

1
We’re building a scalable component library where lists can be nested arbitrarily — how would you design a CSS rule to style every third item without affecting nested lists or breaking with dynamic content injection?
2
A performance audit showed CSS reflows on list updates. How would you optimize the styling of every third item to minimize layout thrashing in a high-frequency update scenario?

8+ years experience

1
We’re migrating a legacy app with hundreds of hardcoded list styles to a CSS-in-JS system — how do you ensure the 'every third item' pattern is preserved consistently across teams without introducing specificity wars or runtime performance penalties?
2
Our design system supports internationalization and dynamic content lengths — how would you architect the CSS strategy for this pattern to remain maintainable across 50+ product teams with different styling conventions and deployment cycles?

Follow-up Questions

❓What if the list items are dynamically generated by a framework like React — does your selector still work?
❓How would you debug if every third item isn't styling as expected?
❓What happens if you have nested <ul> elements inside your list?